<template>
	<view class="pages">
		<view v-if="is_login==false">
			<view class="u-flex-column no_login u-flex-center ">
				<view class="heard_img" style="margin-right: 0;">
					<image :src="`${$http_cos}/static/%E9%BB%98%E8%AE%A4%E5%A4%B4%E5%83%8F.png`">
					</image>
				</view>
				<view class="login" @click="login">
					<text>登录</text>
				</view>
			</view>
			<view class="main_pd">
				<view class="not-main">
					<text class="title">简单一步，遇见优秀的TA</text>
					<view class="not-main-wx u-flex-column">
						<text>添加专属红娘为好友，全方位助您线下脱单</text>
						<view class="u-flex-y-center">
							<text>微信：{{wx_name}}</text>
							<view class="copy u-flex-x-center" @click="copy">
								<text>复制</text>
							</view>
						</view>
					</view>
					<view class="sweep u-flex-center u-flex-column">
						<view class="qr_code">
							<image :src="`${$http_cos}/static/35631673848586_.pic.jpg`">
							</image>
						</view>
						<text>扫一扫上面的二维码，加我为朋友</text>
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<view class="u-flex my_heard" v-if="user_info">
				<view class="u-flex heard_img_warp">
					<view class="heard_img">
						<image :src="user_info.headimgurl"></image>
					</view>
					<view class="u-flex-column u-flex-1 heard_right">
						<text>{{user_info.nickname}}</text>
						<text v-if='isMatchmaker==1'>红娘:{{user_info.userId}}</text>
						<view v-else>
							<text v-if='user_info.memberId==0'>游客</text>
							<text v-else>会员ID:{{user_info.userId}}</text>
						</view>
					</view>
				</view>
				<view class="sign_in" @click="go_sign" v-if="Number(user_info.memberId)>0">
					<image
						src="https://hl-1316403513.cos.ap-shanghai.myqcloud.com/static/%E5%8E%BB%E7%AD%BE%E5%88%B0.png"
						v-if="!is_Sign"></image>
					<image
						src="https://hl-1316403513.cos.ap-shanghai.myqcloud.com/static/%E5%B7%B2%E7%AD%BE%E5%88%B0.png"
						v-else></image>
				</view>
			</view>
			<view class="main">
				<view class="main_bg" style="padding:0rpx 24rpx 55rpx;box-sizing: border-box;">
					<view class="u-flex-between u-flex-y-center title_warp">
						<view class="u-flex-column title_left">
							<text>当前资料权益(积分:{{user_info.integral}})</text>
							<text v-if="Number(user_info.memberId)>0">到期时间：{{user_info.endTime}}</text>
						</view>
						<view class="u-flex-x-center look_grade" @click="look_grade">
							<text class="title_right">点击查看权益</text>
							<view class="look_grade_img">
								<image :src="`${$http_cos}/static/%E5%8F%B3%E7%AE%AD%E5%A4%B4.png`">
								</image>
							</view>
						</view>
					</view>

					<swiper class="swiper" :circular="circular" :display-multiple-items="4" :duration="duration"
						:current="current" next-margin="-10px" :indicator-dots="indicatorDots" :autoplay="autoplay"
						:interval="interval" @change="change_current">
						<swiper-item v-for="(item,index) in menber_list" :key="index"
							style="margin-right: 20rpx !important" @click="skip_number(index)">
							<view class="menber_img" style="margin-right:10px;">
								<image :src="get_number_img(item)"></image>
							</view>
						</swiper-item>
					</swiper>
					<view class="swiper-dots">
						<view class="swiper-dot" :class="dot_current==index?'swiper-dot-active':''"
							v-for="(item,index) in 2" :key="index">

						</view>
					</view>
				</view>

				<view class="main_bg">
					<view class="title">
						<text>我的功能</text>
					</view>
					<view class="u-flex-y-center u-flex-wrap my_function_list">
						<view class="my_function_item u-flex-column" v-for="(item,index) in list" :key="index"
							@click="skip(item)" v-if="item.isDeputy?(user_info.isDeputy==1?false:true):true">
							<view class="my_function_img_warp">
								<image :src="item.src" class="my_function_img"></image>
								<view class="corner_mark" v-if="item.mark">
									<text>{{item.mark}}</text>
								</view>
								<view class="info_num" v-if="item.info_num">
									<text>{{item.info_num}}</text>
								</view>
							</view>
							<text>{{item.name}}</text>
						</view>
					</view>
				</view>

				<!-- <wx-open-launch-weapp id="launch-btn" username="gh_abe27625a6c7" path="pages/index/index">
					<script type="text/wxtag-template">
						<style>.btn { padding: 12px }</style>
				   <view class="advertisingPicture">
				   	
				   </view>
				   <image
				   	src="https://hl-1316403513.cos.ap-shanghai.myqcloud.com/static/my/%E7%BA%A2%E5%A8%98%E5%B9%BF%E5%91%8A%E4%BD%8D.png" mode="width">
				   </image>
				  </script>
				</wx-open-launch-weapp> -->
<!-- ?scene=mid%3D15788 -->
				<view class="advertisingPicture">
					<image
						src="https://hl-1316403513.cos.ap-shanghai.myqcloud.com/static/my/%E7%BA%A2%E5%A8%98%E5%B9%BF%E5%91%8A%E4%BD%8D.png" mode="width">
					</image>
					<!-- <wx-open-launch-weapp style="position:absolute;top:0;left:0;right:0;bottom:0;" id="launch-btn" username="gh_abe27625a6c7"
						path="pages/index/index.html">
						 <script type="text/wxtag-template">
						   <view style="position:absolute;top:0,left:0;right:0;width:100%;height:100vh" ></view>
						 </script>
					</wx-open-launch-weapp> -->
				</view>
				<!--  -->
				<!-- <wx-open-launch-weapp style="flex: 0 0 50%" id="launch-btn" username="gh_cb90de55bf7b" path="pages/index/index.html?scene=mid%3D15788">
									<script type="text/wxtag-template">
										<style>.images{width: 100%!important;}</style>
										<view class="advertisingPicture">
											<image
												src="https://hl-1316403513.cos.ap-shanghai.myqcloud.com/static/my/%E7%BA%A2%E5%A8%98%E5%B9%BF%E5%91%8A%E4%BD%8D.png">
											</image>
										</view>
									</script>
								</wx-open-launch-weapp> -->
			</view>
		</view>
		<!-- <u-action-sheet :actions="actionSheetlist"  round="20" cancelText="取消" closeOnClickOverlay @cancel="actionClose" @close="actionClose" @select="select_action"   :show="actionshow"></u-action-sheet> -->
		<u-picker :show="authority_show" :immediateChange="immediateChange" :showToolbar="showToolbar"
			:columns="columns" :itemHeight="80" title="权限" @cancel="cancel" keyName="name"
			@confirm="authority_submit"></u-picker>
		<u-popup :show="sign_in_show" @close="close_sign_in" :safeAreaInsetBottom="safeAreaInsetBottom" mode="center"
			round="20">
			<view class="sign_in_succeed">
				<view class="succeed_tip">
					<text>恭喜获得{{sign}}个积分</text>
				</view>
				<view class="know" @click="sign_in_show=false">
					<image
						src="https://hl-1316403513.cos.ap-shanghai.myqcloud.com/static/%E6%88%91%E7%9F%A5%E9%81%93%E4%BA%86.png">
					</image>
				</view>
			</view>
		</u-popup>
		<u-popup :show="show" @close="close" :safeAreaInsetBottom="safeAreaInsetBottom" mode="center" round="20">
			<view class="select_members">
				<view class="h1">
					<text>选择会员权限</text>
				</view>
				<view class="u-flex-x-center contener" @click="authority_show=true;show=false">
					<text class="label">权限</text>
					<view class="u-flex-between down_border u-flex">
						<text>{{user.name?user.name:''}}</text>
						<view class="down">
							<image :src="`${$http_cos}/static/down.png`"></image>
						</view>
					</view>
				</view>

				<view class="u-flex-x-center contener">
					<text class="label">时间</text>
					<view class="u-flex-between down_border u-flex">
						<text v-if="user.days!=0">{{user.days}}天</text>
						<text v-else>无限期</text>
					</view>
				</view>
				<view class="u-flex-x-center contener" v-if="user.type==0">
					<text class="label">积分</text>
					<view class="u-flex-between down_border u-flex">
						<input type="number" placeholder="请输入赠送的积分" v-model="integral" />
					</view>
				</view>
				<view class="u-flex-between u-flex">
					<view class="btn disagree" @click="show=false">
						<text>取消</text>
					</view>
					<view class="btn agree" @click="agree">
						<text>确定</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const app = getApp();
	import {
		getMemberList,
		getUserInfo,
		getInviteCode,
		sign,
		getTodaySign,
		getConfig
	} from '@/common/api.js';
	import {
		fun_list
	} from "@/util/fun_list.js"
	import {
		menber_list
	} from '@/util/grade_member.js'
	// #ifdef H5
	const wx = require('jweixin-module');
	// #endif
	export default {
		data() {
			return {
				is_Sign: false,
				circular: false,
				duration: 500,
				current: 0,
				indicatorDots: false,
				autoplay: false,
				interval: 5000,
				integral: '',
				immediateChange: true,
				$http_cos: app.$http_cos,
				safeAreaInsetBottom: false,
				isMatchmaker: 0,
				showToolbar: false,
				user_info: {},
				is_login: false,
				closeOnClickOverlay: true,
				actionshow: false,
				actionSheetlist: [{
					name: '保存到相册',
				}, {
					name: '扫一扫',
				}],
				wx_name: 'ai18758681314',
				list: [],
				false: false,
				columns: [],
				user: '',
				defaultDate_time: [],
				show: false,
				authority_show: false,
				my_user: {},
				menber_list: menber_list,
				sign_in_show: false,
				sign: '',
				dot_current: 2
			}
		},
		onLoad() {

			this.savePic =
				'https://hl-1316403513.cos.ap-shanghai.myqcloud.com/static/%E8%93%9D%E9%B2%B8%E4%BC%9A%E5%91%98.png'
			// #ifdef H5
			// const url = location.href.split('#')[0]
			// let data = {
			// 	params: {
			// 		url: url
			// 	}
			// }
			// getConfig(data, {
			// 	custom: {
			// 		auth: false,
			// 		toast: false,
			// 		catch: false
			// 	}
			// }).then((result) => {
			// 	wx.config({
			// 		debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			// 		appId: result.config.appId, // 必填，公众号的唯一标识，填自己的！
			// 		timestamp: result.config.timestamp, // 必填，生成签名的时间戳，刚才接口拿到的数据
			// 		nonceStr: result.config.nonceStr, // 必填，生成签名的随机串
			// 		signature: result.config.signature, // 必填，签名，见附录1
			// 		jsApiList: ['wx-open-launch-weapp'],
			// 		openTagList: [
			// 			'wx-open-launch-weapp'
			// 		]
			// 	})
			// 	wx.ready(function(res) {});
			// 	wx.error(function(res) {});
			// }).catch((err) => {

			// })

			// #endif
		},
		onShow() {


			try {
				if (uni.getStorageSync('access_token')) {
					this.is_login = true
					this.get_TodaySign()
					this.getMember_List()
					this.get_UserInfo()
				} else {
					this.is_login = false
				}
			} catch (e) {
				//TODO handle the exception
			}
		},
		methods: {
			
			change_current(e) {
				console.log(e)
				if (e.detail.current == 0) {
					this.dot_current = 0
				} else if (e.detail.current == 1) {
					this.dot_current = 1
				}
			},
			get_TodaySign() {
				let data = {
					params: {}
				}
				getTodaySign(data, {
					custom: {
						auth: false,
						toast: false,
						catch: false
					}
				}).then((result) => {
					console.log(result)
					this.is_Sign = result
				}).catch((err) => {})
			},
			close_sign_in() {
				this.sign_in_show = false
			},
			go_sign() {
				if (this.is_Sign == true) {
					return
				}
				let data = {}
				sign(data, {
					custom: {
						auth: false,
						toast: false,
						catch: false
					}
				}).then((result) => {

					this.sign = result
					this.sign_in_show = true

					this.get_TodaySign()
					this.get_UserInfo()
				}).catch((err) => {})

				// uni.navigateTo({
				// 	url:'/pagesA/go_sign_in/index'
				// })
			},
			get_number_img(item) {

				let url = ''
				if (this.user_info.memberName == item.label) {
					url = this.$http_cos + item.urls
				} else {
					url = this.$http_cos + item.name
				}
				return url + '?imageView2/2/w/750/h/q/85'
			},
			look_grade() {
				uni.navigateTo({
					url: '/pagesD/memberRequity/index'
				})
			},
			skip_number(current) {
				uni.navigateTo({
					url: '/pagesD/memberRequity/index?current=' + current
				})
			},
			login() {
				uni.navigateTo({
					url: '/pages/guide/index'
				})
			},
			copy() {
				uni.setClipboardData({
					data: this.wx_name,
					success: () => {
						uni.showToast({
							icon: 'none',
							title: '复制成功'
						});
					}
				});
			},
			skip(item) {
				if (item.name == '邀请会员') {
					this.show = true

					return
				}
				if (item.name == '清除缓存') {
					try {
						uni.removeStorageSync('numberFormData')
						
						uni.$u.toast('清除缓存成功')
					} catch (e) {
						//TODO handle the exception
					}
					return
				}
				if (item.name == '我的主页' && item.url.indexOf('?') < 0) {
					let url = item.url + '?id=' + this.user_info.userId
					item.url = url
				}
				uni.navigateTo({
					url: item.url,
					fail: function() {
						uni.switchTab({
							url: item.url,
						})
					}
				})
			},
			agree() {
				this.show = false

				let data = {
					memberId: this.user.id,
					integral: this.integral
				}
				getInviteCode(data, {
					custom: {
						auth: false,
						toast: false,
						catch: false
					}
				}).then((result) => {
					console.log(result)
					this.integral = ''
					// this.user_info = r
					uni.navigateTo({
						url: '/pagesC/perfect_data/index?id=' + result
					})
				}).catch((err) => {})

			},
			get_UserInfo() {

				getUserInfo({
					custom: {
						auth: false,
						toast: false,
						catch: false
					}
				}).then((r) => {
					this.user_info = r
					if (this.user_info.memberName == '蓝鲸会员') {
						this.current = 1
					} else {
						this.current = 0
					}
					this.menber_list.map((item, index) => {
						if (item.label == this.user_info.memberName) {
							if (index <= 3) {
								this.dot_current = 0
							} else {
								this.dot_current = 1
							}

						}
					})

					try {
						uni.setStorageSync('user_info', r)
					} catch (e) {
						//TODO handle the exception
					}

					let {
						isMatchmaker,
						memberId
					} = r
					let {
						tourist,
						matchmaker
					} = fun_list
					// console.log(isMatchmaker)
					let list = []
					if (Number(isMatchmaker) == 0) {
						this.list = [...tourist].map(item => {
							if (item.name == '我的推荐') {
								item.info_num = Number(r.pendingNum) > 0 ? r.pendingNum : null
							}
							return item
						})

					} else if (isMatchmaker == 1) {
						this.list = [...matchmaker]
					}
					this.$forceUpdate()
					this.isMatchmaker = isMatchmaker
				}).catch((err) => {

				})
			},
			getMember_List() {
				getMemberList({
					custom: {
						auth: false,
						toast: false,
						catch: false
					}
				}).then((r) => {

					this.columns = [r]
					this.user = r[0]
					// this.user_info.memberName
				}).catch((err) => {

				})
			},
			confirm(e) {
				this.show = true

			},
			authority_submit(e) {
				this.user = e.value[0]
				this.cancel()
			},
			cancel() {
				this.show = true
				this.authority_show = false
			},
			time_close() {
				this.time_show = false
				this.show = true
			},
			authority_close() {
				this.authority_show = false
				this.show = true
			},
			close() {
				this.show = false
			},
			dianji() {
				this.show = true
			},
			submit() {
				let isclick = true
				if (isclick) {
					isclick = false
					uni.navigateTo({
						url: './perfect_data_five/index',
						success: () => {
							isclick = true
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.pages {
		.advertisingPicture {
			position: relative;
			height: 200rpx;
			width: 100%;
			margin-bottom: 20rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.heard_img_warp {
			align-items: center;
		}

		.heard_img {
			width: 144rpx;
			height: 144rpx;
			margin-right: 27rpx;
			border-radius: 50%;
			border: 6rpx solid #FFFFFF;
			overflow: hidden;
		}

		.no_login {
			align-items: center;
			padding: 67rpx 0 52rpx;
		}

		.sign_in_succeed {
			width: 601rpx;
			height: 670rpx;
			background-image: url('https://hl-1316403513.cos.ap-shanghai.myqcloud.com/static/%E7%AD%BE%E5%88%B0%E6%88%90%E5%8A%9F.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			position: relative;

			.succeed_tip {
				bottom: 191rpx;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);

				text {
					font-size: 40rpx;
					color: #686868;
					white-space: nowrap;
				}
			}

			.know {
				width: 534rpx;
				height: 102rpx;
				position: absolute;
				bottom: 51rpx;
				left: 50%;
				transform: translateX(-50%);
			}
		}

		.main_pd {
			padding: 0 24rpx;
			box-sizing: border-box;

			.not-main {
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 0 32rpx 61rpx;
				box-sizing: border-box;
				overflow: hidden;

				.title {
					font-size: 30rpx;
					font-family: Microsoft YaHei;
					font-weight: bold;
					color: #000000;
					line-height: 85rpx;
				}

				.not-main-wx {
					background: #F6F6F6;
					border-radius: 20rpx;
					height: 182rpx;
					padding: 33rpx 32rpx;
					box-sizing: border-box;
					margin-bottom: 24rpx;
					justify-content: space-between;

					text {
						font-size: 28rpx;
						color: #101010;
					}

					.copy {
						width: 120rpx;
						height: 58rpx;
						text-align: center;
						align-items: center;
						// line-height: 58rpx;
						background-color: #FF7612;
						border-radius: 12rpx;
						margin-left: 25rpx;

						text {
							color: #fff;
							font-size: 28rpx;
						}
					}
				}

				.sweep {
					padding: 48rpx 0;
					background: #F6F6F6;
					border-radius: 20rpx;
					height: 347rpx;
					box-sizing: border-box;
					align-items: center;

					.qr_code {
						width: 200rpx;
						height: 200rpx;
						border: 6rpx solid #FFFFFF;
						border-radius: 10rpx;
						box-sizing: border-box;
					}

					text {
						display: block;
						margin-top: 23rpx;
						font-size: 28rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #000000;
					}
				}
			}

		}

		.login {
			width: 200rpx;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			border: 2rpx solid #D2D2D2;
			border-radius: 36rpx;
			background-color: #fff;
			margin-top: 24rpx;

			text {
				font-size: 28rpx;
				color: #000000;
			}
		}

		.my_heard {
			padding: 66rpx 0rpx 11rpx 40rpx;
			box-sizing: border-box;
			background: linear-gradient(180deg, #EDEDED, #F4F5F7);
			align-items: center;
			justify-content: space-between;
			position: relative;

			.sign_in {

				width: 170rpx;
				height: 62rpx;

			}

			.heard_right {
				line-height: 50rpx;

				text {
					&:first-child {
						font-size: 32rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #000000;
					}

					&:last-child {
						font-size: 28rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #A3A3A3;
					}
				}
			}

		}
	}

	.main {
		padding: 42rpx 24rpx 0;
		box-sizing: border-box;
		background-color: #F3F3F3;


		.main_bg {
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 0 24rpx 17rpx;
			margin-bottom: 20rpx;
			box-sizing: border-box;
			position: relative;

			.swiper-dots {
				position: absolute;
				left: 50%;
				bottom: 4px;
				text-align: center;
				white-space: nowrap;
				-webkit-transform: translate(-50%);
				transform: translate(-50%);

				.swiper-dot {
					display: inline-block;
					width: 7px;
					height: 7px;
					cursor: pointer;
					background: #e2e2e2;
					border-radius: 50%;
					margin-right: 16rpx;

					&:last-child {
						margin-right: 0;
					}

					&.swiper-dot-active {
						width: 32rpx;
						border-radius: 20rpx;
						background-color: #c1c1c1;
					}
				}


			}

			.title {
				padding: 31rpx 0rpx;
				box-sizing: border-box;
				font-size: 32rpx;
				font-weight: bold;
				color: #111111;
			}

			.title_warp {
				box-sizing: border-box;
				height: 132rpx;

				.title_left {
					text {
						&:last-child {
							color: #A7A6A6;
						}

						&:first-child {
							font-weight: bold;
							font-size: 32rpx;
						}
					}
				}

				.look_grade {
					align-items: center;

					.look_grade_img {
						width: 12rpx;
						height: 20rpx;
						display: block;
						margin-left: 10rpx;
					}
				}

				text {
					font-size: 28rpx;
					color: #111111;
				}
			}

			.swiper {
				height: 200rpx;
				width: 100%;
				overflow: hidden;

				swiper-item {
					width: 100%;
					height: 100%;

					box-sizing: border-box;

				}

			}

			.menber_img {
				width: 152rpx;
				height: 200rpx;
				display: inline-block;

				image {
					width: 100%;
					height: 100%;
					display: block;
				}
			}

			// }

		}
	}

	.my_function_list {
		// padding:23rpx 8rpx;
		box-sizing: border-box;

		.my_function_item {
			padding: 23rpx 0;
			align-items: center;
			width: 25%;

			.my_function_img_warp {
				position: relative;

				.info_num {
					position: absolute;
					min-width: 32rpx;
					min-height: 32rpx;
					padding: 2rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					text-align: center;
					box-sizing: border-box;
					border-radius: 50%;
					right: -10rpx;
					top: -10rpx;
					background: #FF0000;

					text {
						font-size: 22rpx;
						color: #fff;
					}
				}

				.my_function_img {
					width: 50rpx;
					height: 50rpx;
					margin-bottom: 29rpx;
				}

				.corner_mark {
					position: absolute;
					width: auto;
					height: 32rpx;
					line-height: 32rpx;
					box-sizing: border-box;
					width: 90rpx;
					top: -20rpx;
					right: -64rpx;
					text-align: center;
					background-color: #FF0000;
					border-radius: 16rpx 16rpx 16rpx 0rpx;

					text {
						font-size: 22rpx;
						color: #FFFFFF;
						display: block;
					}
				}

			}

			text {
				font-size: 26rpx;
				color: #000000;
			}
		}

	}

	.select_members {
		padding: 45rpx 36rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 46rpx;
		width: 650rpx;
		height: auto;
		z-index: 32222;

		.h1 {
			font-size: 32rpx;
			font-family: Microsoft YaHei;
			font-weight: bold;
			color: #111111;
			text-align: center;
			width: 100%;
			padding: 10rpx 0 48rpx;
		}

		.share-contnet {
			width: 100%;
			height: 100vh;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 777;

			.share-bj {
				width: 100%;
				height: 100%;
				background-color: #333333;
				opacity: 0.8;
				z-index: 888;
				position: absolute;
			}

			.share-image {
				width: 100%;
				height: 100%;
				display: flex;

				image {
					z-index: 999;
					width: 800rpx;
					margin-top: 200rpx;
				}
			}
		}

		.contener {
			align-items: center;
			margin-bottom: 24rpx;

			.label {
				display: block;
				white-space: nowrap;
			}

			text {
				font-size: 28rpx;
				font-weight: 400;
				color: #111111;
			}

			.down_border {
				margin-left: 27rpx;
				border: 2rpx solid #C2C2C2;
				border-radius: 20rpx;
				background: #ffffff;
				height: 88rpx;
				width: 454rpx;
				align-items: center;
				padding: 0 34rpx 0 32rpx;

				.down {
					width: 20rpx;
					height: 12rpx;
				}

				input {
					font-size: 28rpx;
				}
			}

		}
	}
</style>